<template>
    <div>
        <el-row style="margin-top: 20px; margin-left: 20px; font-size: 25px; font-weight: bold;">
            <el-col :span="24">订单管理</el-col>
        </el-row>
        <el-row style="margin-top: 15px;">
            <el-col :span="24">
                <el-tabs type="card" style="width: 100%; margin-left: 8px;" @tab-click="handleClick">
                    <el-tab-pane label="全部">
                        <div class="cart-parent">
<!--                             <el-button type="success" class="card-two">打印快递单</el-button>-->
                            <el-button type="warning" class="card-two" @click="download">导出订单</el-button>
                        </div>
                        <!-- 订单列表 -->
                        <el-table ref="multipleTable" :data="entityList" tooltip-effect="dark" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
                            <el-table-column prop="name" label="订单商品" width="180"></el-table-column>
                            <el-table-column prop="totalPrice" label="订单金额" width="180">
                                <template slot-scope="scope">
                                    ¥<span>{{ scope.row.totalPrice }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" value-format="yyyy-MM-dd HH:mm:ss"
                                             label="下单时间" width="180"></el-table-column>
                            <el-table-column prop="userName" label="用户账号" width="180"></el-table-column>
                            <el-table-column label="支付方式" width="180">
                                <template slot-scope="scope">
                                    <div>
                                        {{ payMethod[scope.row.payMethod] }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="订单状态" width="180">
                                <template slot-scope="scope">
                                    <div>
                                        {{ orderStatus[scope.row.orderStatus] }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button @click="displayEntity(scope.row)" type="primary" size="small">查看
                                    </el-button>
                                    <el-button type="warning" size="small" @click="close(scope.row)">关闭</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[1, 2 , 5, 10]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            style="text-align: center;">
                        </el-pagination>
                    </el-tab-pane>

                    <el-tab-pane label="待付款">
                        <el-empty description="暂无数据"></el-empty>
                    </el-tab-pane>

                    <el-tab-pane label="待发货">
                        <el-empty description="暂无数据"></el-empty>
                    </el-tab-pane>
                    <el-tab-pane label="已发货">
                        <el-empty description="暂无数据"></el-empty>
                    </el-tab-pane>
                    <el-tab-pane label="已完成">
                        <el-empty description="暂无数据"></el-empty>
                    </el-tab-pane>
                    <el-tab-pane label="已关闭"> <el-empty description="暂无数据"></el-empty></el-tab-pane>
                    <br>

                </el-tabs>

                <!-- 订单详情弹窗 -->
                <el-dialog
                        title="订单详情"
                        :visible.sync="showDialogVisible"
                        width="60%">
                    <el-steps :active="entityDetail.orderStatus" align-center finish-status="success"
                              process-status="finish">
                        <el-step title="提交订单" :description="descriptions[1]"></el-step>
                        <el-step title="支付订单" :description="descriptions[2]"></el-step>
                        <el-step title="订单发货" :description="descriptions[3]"></el-step>
                        <el-step title="确认收货" :description="descriptions[4]"></el-step>
                        <el-step title="完成评价" :description="descriptions[5]"></el-step>
                    </el-steps>
                    <br>
                    <div style="background-color: rgba(141, 183, 255, 0.304);
          height: 50px; 
          line-height: 50px; 
          padding-left: 30px;
          color: rgba(31, 139, 255, 0.888); 
          font-weight: bold;
          font-size: large;">
                        当前订单状态：{{ orderStatus[entityDetail.orderStatus] }}
                        <el-button type="primary" plain size="small"
                                   style="float: right; margin-top: 10px; margin-right: 30px;"
                                   @click="close(entityDetail)">关闭订单
                        </el-button>
                    </div>
                    <br>
                    <el-descriptions title="基础信息" direction="vertical" :column="4" border>
                        <el-descriptions-item label="订单编号">{{ entityDetail.orderNumber }}</el-descriptions-item>
                        <el-descriptions-item label="用户账号">{{ entityDetail.userName }}</el-descriptions-item>
                        <el-descriptions-item label="支付方式">{{ payMethod[entityDetail.payMethod] }}
                        </el-descriptions-item>
                        <el-descriptions-item label="物流单号">{{ entityDetail.logisticsNumber }}</el-descriptions-item>
                    </el-descriptions>
                    <br>
                    <el-descriptions title="收货人信息" direction="vertical" :column="4" border>
                        <el-descriptions-item label="收货人">{{ entityDetail.userName }}</el-descriptions-item>
                        <el-descriptions-item label="联系方式">{{ entityDetail.telphone }}</el-descriptions-item>
                        <el-descriptions-item label="邮政编码">{{ entityDetail.emailCode }}</el-descriptions-item>
                        <el-descriptions-item label="收货地址">{{ entityDetail.orderAddr }}</el-descriptions-item>
                    </el-descriptions>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {
    data() {
        return {
            showDialogVisible: false,
            entityList: [],
            entityDetail: {    // 订单详情对象
                id: 0,
                orderNumber: 0,
                userName: '',
                payMethod: 0,
                logisticsNumber: 0,
                telphone: '',
                emailCode: '',
                orderAddr: '',
                orderStatus: '',
                updateTime: '',
                createTime: '',
                province:'',
                county:'',
                city:'',
                specificAddress:''
            },
            pageNum: 1,
            pageSize: 5,
            total: 0,
            descriptions: [],  // 订单进度时间描述
            payMethod: [       // 支付方式
                "无",
                "支付宝支付",
                "微信支付",
                "银行卡支付"
            ],
            orderStatus: [          // 订单状态
                "下单",
                "未付款",
                "待发货",
                "待收货",
                "待评价",
                "已完成"
            ],
            batchSelect: [],  // 多选结果
        }
    },
    methods: {
        //选项卡处理
        // handleStatusChange(status) {
        //     this.orderStatus = status;
        //     console.log("待付款",this.orderStatus);
        //     this.$axios.get('/goodsOrder/getPageInfo', {
        //         params: {
        //             pageSize: this.pageSize,
        //             pageNum: this.pageNum,
        //             orderStatus: this.orderStatus // 使用 this.orderStatus 而非 this.entityDetail.orderStatus，因为你在点击事件中修改的是 this.orderStatus 而不是 this.entityDetail.orderStatus。
        //         }
        //     }).then(res => {
        //             this.entityList = res.data.data.records;
        //             this.total = res.data.data.total;
        //         })
        // },

        //导出订单
        download() {
            if (this.batchSelect.length == 0) {
                this.$message.error("请选择需要导出的订单信息！");
                return;
            }
            this.$axios.post('/goodsOrder/download', this.batchSelect, {responseType: 'blob'})
                .then(res => {
                    let blob = new Blob([res.data], {
                        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    });
                    // let fileName = res.headers['Content-disposition'].split("''")[1];
                    let objectUrl = URL.createObjectURL(blob);
                    let a = document.createElement("a");
                    a.href = objectUrl;
                    a.download = "订单信息" + new Date();
                    a.click();
                })
            this.$refs.multipleTable.clearSelection();
        },

        handleSelectionChange(val) {
            this.batchSelect = [];
            for (let i = 0; i < val.length; i++) {
                this.batchSelect.push(val[i].id);
            }
        },

        // 查询订单详情
        async getById(row) {
            await new Promise((resolve, reject) => {
                this.$axios.get('/goodsOrder/getById/' + row.id)
                    .then(res => {
                        this.entityDetail = res.data.data;
                        this.entityDetail.orderAddr = this.entityDetail.province +
                            this.entityDetail.city +
                            this.entityDetail.county +
                            this.entityDetail.specificAddress;
                        resolve(true);
                    })
            })
        },

        // 关闭订单
        close(row) {
            this.$confirm('此操作将关闭该订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete('/goodsOrder/close/' + row.id)
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: '订单已关闭!'
                        });
                        this.showDialogVisible = false;
                        this.entityDetail.orderStatus = "";
                        this.getPageInfo();
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消关闭'
                });
            });

        },

        // 显示订单详情
        async displayEntity(row) {
            this.descriptions = [];
            await this.getById(row);
            if (this.entityDetail.orderStatus < 5) {
                this.descriptions[this.entityDetail.orderStatus + 1] = this.entityDetail.updateTime
            } else {
                this.descriptions[this.entityDetail.orderStatus] = this.entityDetail.updateTime
            }
            console.log("this.entityDetail.orderStatus",this.entityDetail.orderStatus);
            this.showDialogVisible = true;
        },

        handleClick(tab, event) {
            console.log("tab",tab);
            console.log("even"+event);
            // this.$router.push('/nested/menu3/orderInfo');
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.getPageInfo();
        },

        handleCurrentChange(val) {
            this.pageNum = val;
            this.getPageInfo();
        },

        getPageInfo() {
            this.$axios.get('/goodsOrder/getPageInfo', {
                params: {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    orderStatus: this.entityDetail.orderStatus
                }
            })
                .then(res => {
                    this.entityList = res.data.data.records;
                    this.total = res.data.data.total;
                })
        },
    },
    created() {
        this.getPageInfo();
    }
}
</script>

<style scoped>
.card-two{
    float: left;
}
.cart-parent{
    /*position: relative;*/
    overflow: hidden;
}
.el-main{
    height: 700px;
}
</style>

